$gray-base: #000 !default;
$gray-nr: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-700: #495057 !default;
$gray-600: #6c757d !default;
$gray-300: #dee2e6 !default;
$gray-200: #e9ecef !default;
$primary: #007bff;
$media-border-content: 1px solid rgba(0, 0, 0, 0.1);


.media-container {
    .media-container-navigation {
        h5 {
            padding-top: 10px;
            margin-bottom: 38px;
            color: $gray-700;
        }
    }   
}

/* navbar */

.upload-button {
    margin: 0;
    padding: 0;
    border: 0;

    label {
        margin-bottom: 0; // there is a margin below the label that makes the navbar fattier
    }
}

/* Navigation */

#media-container-navigation-menu {
    list-style: none;
    margin-top: 46px;
    padding-left: 0;
    overflow:hidden;

    li.selected > div {
        font-weight: bold;
    }

    li.selected > div > a > i.folder:before {
        content: "\f07c";
        color: $gray;
    }

    div {
        padding: 0.2rem 0.2rem;

        a {
            color: $gray-dark;
            text-decoration: none;


        }
    }

    ol {
        padding-left: 1rem;
        margin-left: 0px;
    }

    .folder {
        color: lightgray;
    }
    
    .folderhovered {
        font-weight:bold;
    }

    li {
        list-style: none;
    }

    .expand {
        /* make both icons be in the center as their widths are different */
        text-align: center;
        width: 10px;
        cursor: pointer;
    }

    .opened {
        svg{
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
    }

    .empty {
        transform: none;
        visibility: hidden;
    }

    .closed {
    }
}

[v-cloak] {
    display: none !important;    
}

/* Upload button */
.fileinput-button {
    cursor: pointer;
}

.fileinput-button input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* File view */
.media-container-main {

    ol {
        display: flex;
        flex-direction: row;
        align-items: stretch;

        li {
            margin-bottom: 16px;
            cursor: pointer;
            margin-left: 0.9em;
            margin-right: 0.7em;

            .inline-media-button {
                opacity: 0;
                padding-top: 0px;
                position: absolute;
                top: 0px;
                right: 0px;
                border-radius: 0px;
                margin-top: -32px;
                transition: all 0.2s;
            }

            &.selected {
                border: 1px solid $primary;
            }

            &.selected .inline-media-button, &:hover .inline-media-button {
                opacity: 1;
                margin-top: 0px;
                transition: all 0.2s;
            }
        }

        .thumb-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        list-style: none;
        padding-left: 0;
    }

    .media-items-table {
        border: solid 1px $gray-200;
        padding: 20px;
        font-size: 0.875rem;

        .header-row {
            background-color: rgba(0,0,0, 0.03);
        }

        .header-row th {
            padding-top: 8px;
            padding-bottom: 8px;
            color: $gray-700;
            font-weight: 500 !important;
            user-select: none;
        }

        .thumbnail-column {
            text-align: center;
            width: 80px;
            padding-left: 16px;
            padding-right: 16px;
            border-right: dashed 1px #ddd;

            .image-wrapper {
                width: 80px;
                height: 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            img {
                max-width: 80px;
                max-height: 80px;
            }
        }

        td {
            vertical-align: middle;
        }

        .text-col {
            margin-top: -15px;
        }

        tr:hover {
            cursor: pointer;
        }

        tr.selected {
            background-color: lighten($primary, 45%);
            border-left: solid 2px $primary;
        }

        .media-name-cell {
            margin-top: 16px;
            display: flex;
            flex-direction: column;

            .media-filename {
                flex-grow: 1;
            }

            .buttons-container {
                opacity: 0;
                transition: all 0.2s;
            }
        }

        tr:hover .buttons-container, tr.selected .buttons-container {
            opacity: 1;
            transition: all 0.2s;
        }

        .btn-link {
            color: $gray-600;
            padding-left: 0;
        }
    }

    .action-bar {
        background-color: $gray-200;
        justify-content: flex-start;
        flex-grow: 1;
        text-align: left;
        margin-bottom: 16px;

        .media-filter {
            flex-grow: 1;
        }
    }

    .breadcrumb {
        background-color: transparent;
        border-bottom: $media-border-content;
        border-radius: 0px;

        .breadcrumb-buttons {
            justify-content: flex-start;
            flex-grow: 1;
            margin-top: -5px;
        }

        .visibility-buttons {
            justify-content: flex-end;
            flex-grow: 0;
            margin-top: -5px;

            .selected {
                color: $primary;
            }
        }

    }
}

.media-container-main-item-title {
    border-top: solid 1px $gray-300;
    padding-top: 24px;
    position:relative;
    overflow:hidden;

    .media-filename {
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:block;
    }
}

.breadcrumb-item.active {
    margin-right: 1rem;
}

.media-field-toolbar {
    display:flex;
    
    code {
        flex-grow: 1;
        padding: 4px;
        white-space: nowrap;
    }
}

.selected-media-label {
    justify-content: flex-start;
    flex-grow: 1;
    text-align:left;

    small {
        padding: 8px;
    }
}

.message-warning {
    padding:20px;
    margin-bottom:8px;
}


.modal-body .media-container {
    // on modal the available space is smaller. So the buttons overlap.
    // Breakpoints that switches visibility of buttons on full screen are not OK for the modal.
    // So we use these classes to enforce the same layout we have on small screen even when the screen size is not small.
    .visible-on-modal {
        display: flex !important;
    }

    .hidden-on-modal {
        display: none !important;
    }

    #media-container-navigation-menu a,
    .breadcrumb-item a {
        font-size: 0.9rem;
    }
    // there is a size's range where the table mode overflows the modal.
    // We fix it by hidding extra columns while in that range
    /*@include media-breakpoint-only(md) {
        .optional-col {            
            display:none;
        }
    }*/
    @media only screen and ( max-width: 992px ) and ( min-width: 768px ) {
        .optional-col {
            display: none;
        }
    }
}

#customdropzone {
    align-items: center;
    background: rgba(95, 175, 139, 0.8);
    color: #FFFFFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 0px;
    justify-content: center;
    left: 0;
    top: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 50;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

#customdropzone.in {
    opacity: 1;
    height: 100%;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.upload {
    background-color: rgba(0,0,0,0.05);
    border-radius: 2px;
    border: 1px solid #ccc;
    height: 60px;
    font-size: 0.875rem;
    user-select: none;
    min-width: 300px;
    flex-grow: 1;
    @media only screen and ( min-width: 768px ) {
        width:300px;
    }

    .close-warning {
        display: block;
        float: right;
        margin-top: -8px;
        margin-right: -8px;
        cursor: pointer;
        padding: 2px 8px;
    }

    .upload-name {
        padding-top: 0;
        margin-bottom: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 50px;
    }

    .progress-bar {
        display: block;
        margin-top: 15px;
        height: 3px;
        background-color: #007bff;        
    }

    .error-message {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 50px;
    }
}
.upload-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #856404;
}

.upload-list {
    margin-bottom: 8px;

    .header {
        height: 40px;
        padding: 6px 20px;
        background-color: rgba(0,0,0,0.03);
        border: solid 1px #e9ecef;
        border-radius: 2px;
        cursor: pointer;
        font-size: 0.875rem;
        color: #666;
    }

    .toggle-button {
        padding: 5px 8px;
        margin-top: -3px;
        float: right;
    }

    .card-body {
        border: solid 1px #e9ecef;
        padding: 0;
    }
}
